<template>
    <view class="edit-name">
        <view class="input-box">
			<input type="text" placeholder-style="color:#aaa" maxlength="20" :value="inputText" @input="input" />
			<uni-icons class="uni-icon" color="#aaaaaa" type="clear" v-if="inputText.length>0" @click="clearIcon"></uni-icons>
		</view>
        <view class="len">{{inputText.length}}/20</view>
    </view>
</template>
<script>
export default {
    data() {
        return{
            inputText: '',
            options: {}
        } 
    },
    onNavigationBarButtonTap(e){
        this.keep()
    },
    onLoad(options){
        this.options = options;
        this.inputText = options.name
    },
    methods: {
        keep(){
            // 保存
            let str = this.inputText.trim()
            if(!str){
                this.utils.showToast('群名称不能为空');
                return
            }
            this.api.post('chatGroupManage/updateChatGroupData', {
                chatGroupId: this.options.id,
                name: this.inputText,
            }).then(res=>{
                if(res.data.state != 'ok') return;
                this.utils.showToast('群名称修改成功');
            })
        },
        input(e){
            this.inputText = e.detail.value;
        },
        clearIcon(){
            this.inputText = ''
        }
    }
}
</script>
<style lang="less" scoped>
    .edit-name{
        .input-box{
			margin: 0 32rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f2f2f2;
			padding: 0 32rpx;
			input{
				font-size: 28rpx;
				width: 80%;
			}
			.uni-icon{
				color: #aaa;
			}
			.name{
				white-space: nowrap;
				&.letter{
					letter-spacing: .1em;
				}
			}
		}
        .len{
            font-size: 24rpx;
            text-align: right;
            margin: 32rpx;
            color: #aaa
        }
    }
</style>